<template>
    <div class="table-page">
        <div
            class="table-search-box"
            @keyup.enter="search()"
        >
            <div class="search-item">
                <label>广告位名称：</label>
                <div class="table-query-input">
                    <el-input
                        v-model="queryData.name"
                        clearable
                        placeholder="广告位名称"
                    ></el-input>
                </div>
            </div>

            <div class="search-item">
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    :loading="tableLoading"
                    @click="clickSearch()"
                >搜索
                </el-button>
            </div>
            <div class="search-item">
                <el-button
                    icon="el-icon-refresh"
                    :loading="tableLoading"
                    @click="resetSearch()"
                >重置
                </el-button>
            </div>
        </div>
        <div class="table-operation-box">
            <el-button
                type="primary"
                style="margin-bottom: 2em"
                @click="clickCategory()"
            >新增广告位
            </el-button>
        </div>

        <div class="table-data-box">
            <el-table
                ref="table"
                v-loading="tableLoading"
                :data="tableData"
                border
                style="width: 100%;min-height:40em"
                row-key="id"
                @selection-change="tableSelectionChange"
            >
                <el-table-column
                    type="selection"
                    width="55"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="广告位名称"
                    width="120">
                </el-table-column>
                <el-table-column
                    prop="code"
                    label="code"
                    width="120">
                </el-table-column>


                <el-table-column
                    prop="createdName"
                    label="创建人"
                    min-width="100"
                >
                </el-table-column>
                <el-table-column
                    prop="createdTime"
                    label="创建时间"
                    min-width="100"
                >
                </el-table-column>


                <el-table-column
                    label="操作"
                    width="260"
                    align="center"
                    fixed="right"
                >
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            icon="el-icon-edit"
                            size="mini"
                            :loading="scope.row.opLoading"
                            @click="clickEdit(scope.row)"
                        >编辑
                        </el-button>
                        <el-button
                            v-if="!scope.row.edit"
                            class="danger"
                            type="text"
                            icon="el-icon-delete"
                            size="mini"
                            :loading="scope.row.opLoading"
                            @click="
                                tableDelete(
                                    '/advertisement/position/delete',
                                    {
                                        id: scope.row.id
                                    },
                                    true
                                )
                            "
                        >删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div v-if="pageData.total" class="xy-between table-page-box">
            <el-pagination
                background
                :current-page.sync="pageData.currentPage"
                :page-sizes="pageData.pageSizes"
                :page-size.sync="pageData.pageSize"
                layout="total,  prev, pager, next, sizes, jumper"
                :total="pageData.total"
            >
            </el-pagination>
        </div>

        <el-dialog
            :title="dialogFormTitle"
            :visible.sync="dialogFormVisible"
            custom-class="one-dialog"
        >
            <el-form
                ref="dataForm"
                :inline="true"
                :model="dataForm"
                label-width="8em"
                :rules="dataFormRule"
                class="table-edit-from"
            >
                <el-form-item
                    label="广告位名"
                    prop="name"
                >
                    <el-input
                        v-model="dataForm.name"
                        type="text"
                    ></el-input>
                </el-form-item>
                <el-form-item
                    label="code"
                    prop="code"
                >
                    <el-input
                        v-model="dataForm.code"
                        type="text"
                        :disabled="!addOrUpdateflag"
                    ></el-input>
                </el-form-item>

            </el-form>

            <span
                slot="footer"
                class="dialog-footer"
            >
        <el-button
            :loading="submitFlag"
            @click="dialogClose"
        >取 消</el-button>
        <el-button
            v-show="!addOrUpdateflag"
            :loading="submitFlag"
            type="primary"
            @click="recordSave(dataForm)"
        >保 存</el-button>
        <el-button
            v-show="addOrUpdateflag"
            :loading="submitFlag"
            type="primary"
            @click="recordSave(dataForm)"
        >新增</el-button>
      </span>
        </el-dialog>
    </div>
</template>

<script>
import {TablePage} from "@/layout/mixin/iVue.js";
import {mapState} from "vuex";
import resourceShow from "@/components/resource/resourceShow";

export default {
    name: "ExamCalendar",
    components: {
        resourceShow
    },
    mixins: [TablePage],
    async asyncData(context) {
        return Promise.resolve().then(() => {
            const {app, query} = context;
            this.courseId = context.route.query.courseId;
            console.log("courseId", this.courseId);
        });
    },
    data() {
        return {
            initAddForm: {
                id: null,
                name: null,
                remark: null
            },
            actions: null,
            addOrUpdateflag: false,
            dataFormRule: {
                name: [
                    {required: true, message: "请输入广告位名", trigger: "blur"}
                ],
                code: [
                    {required: true, message: "请输入code", trigger: "blur"}
                ],
            }
        };
    },
    computed: {
        ...mapState({
            status: state => state.status.roleSystem
        })
    },
    watch: {
        actionSearch(val) {
            this.$refs.tree.filter(val);
        }
    },
    methods: {


        clickEdit(val) {
            this.addOrUpdateflag = false;
            this.clickSimpleEdit(val, "广告位编辑", val);
        },
        clickCategory() {
            (this.addOrUpdateflag = true),
                this.clickAdd("添加广告位", this.selectAllAction);
        },

        search() {
            this.loadTable("/advertisement/position/page", this.queryData);
        },
        recordSave(dataForm) {
            this.$refs["dataForm"].validate((valid) => {
                if (!valid) {
                    console.log("error submit!!");
                    return false;
                }
            });
            console.log("===")
            this.formDataSave("/advertisement/position/update").then(res => {

            });

        }
    }
};
</script>

<style lang="scss" scoped>
.top {
    width: 100%;
    height: 100%;
    //   background: red;
    display: flex;
    flex-direction: column;
}

.action-bar {
    width: 100%;
    height: 60px;
    border-bottom: 1px;
    //   background: pink;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.action-bar-add {
    width: 100px;
    height: 50px;
    border-bottom: 1px;
    //   background: rgb(170, 129, 136);
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-bar-group {
    width: 160px;
    height: 50px;
    border-bottom: 1px;
    //   background: rgb(158, 120, 126);
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-list {
    width: 100%;
    height: 380px;
    border-bottom: 1px;
    //   background: rgb(167, 123, 130);
    display: flex;
    flex-direction: column;
}

.action-bottom {
    width: 100%;
    height: 60px;
    border-bottom: 1px;
    //   background: rgb(131, 154, 228);
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.action-bottom-upload {
    width: 160px;
    height: 50px;
    border-bottom: 1px;
    //   background: rgb(170, 129, 136);
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-list-top {
    width: 100%;
    height: 52px;
    border-bottom: 1px;
    //   background: rgb(167, 123, 130);
    display: flex;
}

.action-list-middle {
    width: 100%;
    height: 300px;
    //   border-bottom: 1px;
    //   background: rgb(167, 123, 130);
    display: flex;
    flex-direction: column;
}

.action-list-form {
    width: 100%;
    height: 38px;
    border-bottom: 1px;
    //   background: rgb(167, 123, 130);
}

.action-column {
    width: 100%;
    height: 30px;
    border-bottom: 1px;
    //   background: rgb(167, 123, 130);
    display: flex;
    flex-direction: row;
}

.action-column-item {
    width: 100%;
    height: 50px;
    //   background: rgb(167, 123, 130);
    display: flex;
    flex-direction: row;
    text-align: center;
    align-items: center;
    justify-content: space-between;
    border-right: 1px solid #dfe6ec;
    border-bottom: 1px solid #dfe6ec;
    border-top: 1px solid #dfe6ec;
}

.action-check {
    width: 20%;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.form-item {
    width: 14%;
    height: 62%;
    border-right: 1px solid #dfe6ec;
    //   background: red;
    display: flex;
    flex-direction: row;
    margin: 0 auto;
    text-align: center;
    // align-items: center;
    //   border-bottom: 1px solid #dfe6ec;
}

.form-item-name {
    width: 16%;
    height: 62%;
    border-right: 1px solid #dfe6ec;
    //   background: red;
    display: flex;
    flex-direction: row;
    margin: 0 auto;
    text-align: center;
    // align-items: center;
    //   border-bottom: 1px solid #dfe6ec;
}

.form-item-progress {
    width: 8%;
    height: 78%;
    border-right: 1px solid #dfe6ec;
    //   background: red;
    display: flex;
    flex-direction: row;
    margin: 0 auto;
    text-align: center;
    // align-items: center;
    //   border-bottom: 1px solid #dfe6ec;
}

.el-form-item--mini .el-form-item__content {
    line-height: 37px !important;
}

.form-preview-pdf {
    width: 980px;
    height: 780px;
}

.form-preview-img {
    width: 160px;
    height: 160px;
}

.widthImg {
    width: 40%;
    height: 60%;
    display: flex;
    justify-content: center;
}

.widthPdf {
    width: 60%;
    height: 60%;
    display: flex;
    justify-content: center;
}

.update-form-item {
    width: 380px;
    //   margin-left: 20px;
    display: flex;
    flex-wrap: wrap;
}

.update-forms {
    width: 1200px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    //   justify-content: space-between;
}

.resourceShow {
    width: 60%;
    height: 60%;
}

</style>
